<template>
	<cl-dialog
		:title="editing ? '编辑模板' : '新增模板'"
		width="500px"
		:visible.sync="visible"
		@close="close"
		:props="{
			top: '5vh',
		}"
	>
		<el-form ref="form" label-position="top" :model="form" :rules="rules">
			<el-form-item label="模板标题" prop="title">
				<el-input v-model.trim="form.title" placeholder="请输入模板标题" />
			</el-form-item>
			<el-form-item label="消息类型" prop="msg_type">
				<el-radio-group v-model="form.msg_type">
					<el-radio label="text">文本消息</el-radio>
					<el-radio label="link">图文链接消息</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item v-if="form.msg_type == 'text'" label="消息内容" prop="content">
				<cl-wang-editor ref="content" :height="400" v-model.trim="textContent.content" />
			</el-form-item>
			<template v-if="form.msg_type == 'link'">
				<el-form-item label="链接标题" prop="title">
					<el-input v-model.trim="linkContent.title" placeholder="请输链接标题" />
				</el-form-item>
				<el-form-item label="链接描述" prop="desc">
					<el-input v-model.trim="linkContent.desc" placeholder="请输链接描述" />
				</el-form-item>
				<el-form-item label="跳转链接" prop="desc">
					<el-input v-model.trim="linkContent.url" placeholder="请输点击后跳转的链接" />
				</el-form-item>
			</template>
		</el-form>
		
		<template #footer>
			<el-button type="primary" @click="submit">确定</el-button>
			<el-button @click="close">关闭</el-button>
		</template>
	</cl-dialog>
</template>
<script>
export default {
	data() {
		return {
			visible: false,
			editing: false,
			form: {
				biz_id: "",
				content: "",
				id: "",
				msg_id: "",
				msg_type: "",
				title: ""
			},
			rules: {
				
			},
			textContent: {
				content: ""
			},
			linkContent: {
				title: "",
				desc: "",
				url: "",
				thumb_media_id: ""
			}
		};
	},
	methods: {
		open(type, data) {
			this.editing = type;
			this.visible = true;
			if (type) {
				Object.keys(this.form).forEach(k => {
					data[k] != undefined && (this.form[k] = data[k]);
				});
			}
			else {
				this.form.biz_id = data.biz_id
			}
			
			if (data.msg_type == 'text') {
				this.textContent = data.content
			}
			else if (data.msg_type == 'link') {
				this.linkContent = data.content
			}

			this.getCorpList()
		},
		close() {
			this.reset()
			this.visible = false;
		},
		reset() {
			this.saving = false;
			this.form = {
				biz_id: "",
				content: "",
				id: "",
				msg_id: "",
				msg_type: "",
				title: ""
			},
			this.textContent = {
				content: ""
			},
			this.linkContent = {
				title: "",
				desc: "",
				url: "",
				thumb_media_id: ""
			}
		},
		async getCorpList() {
			const biz_id = this.getCurrBiz();
			const data = await this.$service.workwechat.page({biz_id: biz_id})
			this.corpList = data.list
		},
		async submit() {
			if (this.form.msg_type == 'text') {
				this.form.content = this.textContent
			}
			else if (this.form.msg_type == 'link') {
				this.form.content = this.linkContent
			}

			await this.$service.servicerMsg[this.editing ? 'edit' : 'add'](this.form)
			this.$emit('confirm')
			this.close()
		}

	}
};
</script>
<style lang="scss" scoped>
::v-deep {
	.el-dialog__body {
		max-height: 70vh;
		overflow: auto;
	}
}
.staff-list {
	display: flex;
	flex-wrap: wrap;
	::v-deep .cl-customer-info {
		width: auto;
		flex-direction: column;
		align-items: center;
		width: 70px;
		.cus-info {
			min-width: auto;
			padding-left: 0;
			margin-top: 10px;
			.cus-name .ellipsis {
				word-break: break-all;
				white-space: pre-wrap;
			}
		}
	}
}
</style>
